﻿<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>jQuery选项卡tabulous</title>
	<link href='css/progression.css' rel='stylesheet' type='text/css'>
	<link href='css/style.css' rel='stylesheet' type='text/css'>
</head>
<body>

<h3 class="demo2">缩放切换：</h3>
<div id="tabs">
	<ul>
		<li><a href="#tabs-1" title="">Tab 1</a></li>
		<li><a href="#tabs-2" title="">Tab 2</a></li>
		<li><a href="#tabs-3" title="">Tab 3</a></li>
	</ul>

	<div id="tabs_container">
		<div id="tabs-1">
			<p>缩放切换1-1...缩放切换1-1...缩放切换1-1...缩放切换1-1...缩放切换1-1...缩放切换1-1...缩放切换1-1...缩放切换1-1...缩放切换1-1...缩放切换1-1...缩放切换1-1...缩放切换1-1...</p>
			<p>缩放切换1-2...缩放切换1-2...缩放切换1-2...缩放切换1-2...缩放切换1-2...缩放切换1-2...缩放切换1-2...缩放切换1-2...缩放切换1-2...缩放切换1-2...缩放切换1-2...</p>
		</div>
		<div id="tabs-2">
			<p>缩放切换2-1...缩放切换2-1...缩放切换2-1...缩放切换2-1...缩放切换2-1...缩放切换2-1...缩放切换2-1...缩放切换2-1...缩放切换2-1...缩放切换2-1...缩放切换2-1...缩放切换2-1...</p>
		</div>
		<div id="tabs-3">
			<p>缩放切换3-1...缩放切换3-1...缩放切换3-1...缩放切换3-1...缩放切换3-1...缩放切换3-1...缩放切换3-1...缩放切换3-1...</p>
			<p>缩放切换3-2...缩放切换3-2...缩放切换3-2...缩放切换3-2...缩放切换3-2...缩放切换3-2...缩放切换3-2...缩放切换3-2...缩放切换3-2...缩放切换3-2...缩放切换3-2...</p>
		</div>
	</div>
		
</div>

<h3 class="demo2">滑动切换：</h3>
<div id="tabs2">
	<ul>
		<li><a href="#tabs-1" title="">Tab 1</a></li>
		<li><a href="#tabs-2" title="">Tab 2</a></li>
		<li><a href="#tabs-3" title="">Tab 3</a></li>
	</ul>
	<div id="tabs_container">
		<div id="tabs-1">
			<p>滑动切换1-1...滑动切换1-1...滑动切换1-1...滑动切换1-1...滑动切换1-1...滑动切换1-1...滑动切换1-1...滑动切换1-1...滑动切换1-1...滑动切换1-1...</p>
			<p>滑动切换1-2...滑动切换1-2...滑动切换1-2...滑动切换1-2...滑动切换1-2...滑动切换1-2...滑动切换1-2...滑动切换1-2...</p>
		</div>
		<div id="tabs-2">
			<p>滑动切换2-1...滑动切换2-1...滑动切换2-1...滑动切换2-1...滑动切换2-1...滑动切换2-1...滑动切换2-1...滑动切换2-1...滑动切换2-1...滑动切换2-1...滑动切换2-1...滑动切换2-1...</p>
		</div>
		<div id="tabs-3">
			<p>滑动切换3-1...滑动切换3-1...滑动切换3-1...滑动切换3-1...滑动切换3-1...滑动切换3-1...滑动切换3-1...滑动切换3-1...滑动切换3-1...</p>
			<p>滑动切换3-2...滑动切换3-2...滑动切换3-2...滑动切换3-2...滑动切换3-2...滑动切换3-2...滑动切换3-2...滑动切换3-2...滑动切换3-2...滑动切换3-2...滑动切换3-2...滑动切换3-2...</p>
		</div>
	</div>
</div>

<h3 class="demo2">放大切换：</h3>
<div id="tabs3">
	<ul>
		<li><a href="#tabs-1" title="">Tab 1</a></li>
		<li><a href="#tabs-2" title="">Tab 2</a></li>
		<li><a href="#tabs-3" title="">Tab 3</a></li>
	</ul>
	<div id="tabs_container">
		<div id="tabs-1">
			<p>放大切换1-1...放大切换1-1...放大切换1-1...放大切换1-1...放大切换1-1...放大切换1-1...放大切换1-1...放大切换1-1...放大切换1-1...放大切换1-1...放大切换1-1...</p>
			<p>放大切换1-2...放大切换1-2...放大切换1-2...放大切换1-2...放大切换1-2...放大切换1-2...放大切换1-2...放大切换1-2...放大切换1-2...</p>
		</div>
		<div id="tabs-2">
			<p>放大切换2-1...放大切换2-1...放大切换2-1...放大切换2-1...放大切换2-1...放大切换2-1...放大切换2-1...放大切换2-1...放大切换2-1...放大切换2-1...放大切换2-1...放大切换2-1...</p>
		</div>
		<div id="tabs-3">
			<p>放大切换3-1...放大切换3-1...放大切换3-1...放大切换3-1...放大切换3-1...放大切换3-1...放大切换3-1...放大切换3-1...放大切换3-1...放大切换3-1...</p>
			<p>放大切换3-2...放大切换3-2...放大切换3-2...放大切换3-2...放大切换3-2...放大切换3-2...放大切换3-2...放大切换3-2...放大切换3-2...放大切换3-2...放大切换3-2...放大切换3-2...</p>
		</div>
	</div>
</div>

<h3 class="demo2">翻转切换：</h3>
<div id="tabs4">
	<ul>
		<li><a href="#tabs-1" title="">Tab 1</a></li>
		<li><a href="#tabs-2" title="">Tab 2</a></li>
		<li><a href="#tabs-3" title="">Tab 3</a></li>
	</ul>
	<div id="tabs_container">
		<div id="tabs-1">
			<p>翻转切换1-1...翻转切换1-1...翻转切换1-1...翻转切换1-1...翻转切换1-1...翻转切换1-1...翻转切换1-1...翻转切换1-1...翻转切换1-1...翻转切换1-1...</p>
			<p>翻转切换1-2...翻转切换1-2...翻转切换1-2...翻转切换1-2...翻转切换1-2...翻转切换1-2...翻转切换1-2...翻转切换1-2...翻转切换1-2...</p>
		</div>
		<div id="tabs-2">
			<p>翻转切换2-1...翻转切换2-1...翻转切换2-1...翻转切换2-1...翻转切换2-1...翻转切换2-1...翻转切换2-1...翻转切换2-1...翻转切换2-1...翻转切换2-1...翻转切换2-1...翻转切换2-1...</p>
		</div>
		<div id="tabs-3">
			<p>翻转切换3-1...翻转切换3-1...翻转切换3-1...翻转切换3-1...翻转切换3-1...翻转切换3-1...翻转切换3-1...翻转切换3-1...翻转切换3-1...翻转切换3-1...</p>
			<p>翻转切换3-2...翻转切换3-2...翻转切换3-2...翻转切换3-2...翻转切换3-2...翻转切换3-2...翻转切换3-2...翻转切换3-2...翻转切换3-2...翻转切换3-2...翻转切换3-2...</p>
		</div>
	</div>
</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/tabulous.js"></script>
<div style="text-align:center;clear:both">
	<p>说明：四种标签切换方式随意使用，显示主题不限于文字，也可以是图片或其他元素</p>
</div>
</body>
<script type="text/javascript" src="/public/js/footer.js"></script>
</html>
